<!-- template为组件的模板结构 -->
<template>
  <h1>这是App的根组件</h1>
  <!-- 使用{{}}插值表达式 -->
  <p>生成一个随机数字:{{(Math.random()*10).toFixed(2)}}</p>
  <!-- 使用v-bind属性绑定 -->
  <p :title="new Date().toLocaleTimeString()">我在黑马程序员学习vue.js</p>
  <!-- 属性v-on事件绑定 -->
  <button @click="showInfo">按钮</button>
  <hr>
  <p class="user">{{username}}</p>

  <!-- 调用其他注册好的组件 -->
  <my-swiper></my-swiper>
  <my-test></my-test>
  <!-- 这是被局部注册的组件，只能在当前范围内使用 -->
  <my-local></my-local>
</template>

<!-- script为组件的javascript行为 -->
<script>
export default{
  // 今后，组件相关的data数据，methods方法等，都需要定义到export default所导出的对象中
  methods: {
    showInfo(){
      console.log("我点击了按钮~");
    }
  },
  // name属性是当前组件的名称，建议每个单词的首字母大写
  name:'MyApp',
  // 组件的数据 data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象
  data() {
    return {
      username:'娃哈哈',
    }
  },
}
</script>

<!-- style为组件的样式 -->
<style lang="css">
.user{
  font-size: 20px;
  font-weight: 600;
  color:purple;
}
</style>